<template>
	<div>
    <div style="width: 100%;">
      <div style="background-color: white;display: flex;justify-content: center;width: 1203px;">
        <div style="display: flex;justify-content: space-between;width: 94%;">
          <div style="width: 90px;">
            <div style="margin-top: 50px;">
              <span style="font-size: 13px;">配送地址</span>
            </div>
          </div>
          <div style="width: 1045px;">
            <set-address-child ads-block-wdith="260" ads-block-height="160" :if-can-click="true" @updatedataemit="updateDataEmit()" :content-val="content"></set-address-child>
          </div>
        </div>
      </div>
      <div style="width: 1203px;height: 20px;background-color: #e7e7e7"></div>
      <div style="background-color: white;height: 120px;display: flex;justify-content: center;width: 1203px;">
        <div style="display: flex;justify-content: space-between;width: 94%;">
          <div style="width: 90px;">
            <div style="margin-top: 50px;">
              <span style="font-size: 13px;">配送地址</span>
            </div>
          </div>
          <div style="width: 1045px;display: flex;align-items: center">
            <div style="height: 45px;width: 230px;border: green solid 1px;border-radius: 5px;display: flex;align-items: center;justify-content: center;margin-left: 46px;">
              <span>在线支付</span>
            </div>
          </div>
        </div>
      </div>
      <div style="width: 1203px;height: 20px;background-color: #e7e7e7"></div>
      <div style="background-color: white;display: flex;justify-content: center;width: 1203px;">
        <div style="display: flex;justify-content: space-between;width: 94%;">
          <div style="width: 90px;">
            <div style="margin-top: 50px;">
              <span style="font-size: 13px;">商品清单</span>
            </div>
          </div>
          <div style="width: 1045px;">
            <order-com-show :contents="comShowMsg"></order-com-show><!--提交订单展示商品的组件-->
            <div style="width: 100%;height: 360px;display: flex;justify-content: flex-end;border-top: #e7e7e7 solid 1px;">
              <div style="height: 100%;width:250px;">
                <div style="width: 100%;height: 43px;"></div>
                <div style="width: 100%;height: 43px;display: flex;justify-content: space-between">
                  <span>商品数量</span>
                  <span>{{getBuyNum}}</span>
                </div>
                <div style="width: 100%;height: 43px;display: flex;justify-content: space-between">
                  <span>商品总额</span>
                  <span>￥{{getSubmitTotalPrice}}</span>
                </div>
                <div style="width: 100%;height: 43px;display: flex;justify-content: space-between">
                  <span>运费 <span style="font-size: 12px;">（实付满￥69.00包邮）</span></span>
                  <span>￥0.00</span>
                </div>
                <div class="shoppingCarDivNine">
                  <div style="display:flex;justify-content: space-between;width: 190px;align-items: flex-end">
                    <div>
                      <span class="shoppingCarDivTen">应付:</span>&nbsp;
                    </div>
                    <div>
                      <span style="font-size: 30px;">
                    ￥{{getSubmitTotalPrice}}
                    </span>
                    </div>
                  </div>
                  <div class="shoppingCarDivEleven">
                    <submit-button text-msg="提交订单" @click="clickSubmitOrder()" button-back-color="orangered" button-font-color="white"/>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import SetAddressChild from "../../components/content/personController/SetAddressChild";

  import OrderComShow from "../../components/content/personController/OrderComShow";

  import SubmitButton from "../../components/content/detailPage/SubmitButton";

  import {mapGetters,mapActions} from "vuex";
  import {
    requestShippingAdsMsgByUserId,
    requestAddOrderMsg,
    requestAddOrderComMsgData,
    requestDeleteShoppingCarMg,
    requestOrderDataByUserId,
    requestOrderComMsgDataByUserId,
    updateOrderStatus
  } from "../../network/home";

  import gettime from "../../commonjs/const/gettime";

  export default {
    name: "SubmitOrderChild",
    components: {
      SetAddressChild,
      OrderComShow,
      SubmitButton
    },
    methods: {
      ...mapActions({
        loadDataForOrderSubmitData: "OrderSubmitData/loadDataForOrderSubmitData",
        loadDataForShippingAddress: "ShippingAddress/loadDataForShippingAddress",
        loadDataForOrder: "Order/loadDataForOrder",
        loadDataForOrderComMsg: "OrderComMsg/loadDataForOrderComMsg"
      }),
      clickSubmitOrder(){//点击跳转到支付页面
        //在跳往支付页面之前，首先添加订单信息和订单商品信息
        //调用方法添加订单信息表信息，首先准备订单表的信息
        let tempVal = {
          orderstatus: 1,//待支付
          paymenttime: gettime(),//付款时间
          postage: 0,//邮费
          total: this.getSubmitTotalPrice,//总价
          getadress: this.getIsLLAdressMsgId,//获取地址编号
          paymentway: 1,//支付方式
          userid: this.getUserId
        }
        let orderId;
        requestAddOrderMsg(tempVal)
          .then(data => {
            let countOne = 0;
            let countTwo = 0;
            //为订单编号变量赋值
            orderId = data.data;
            this.comShowMsg.filter(item => {
              ++countOne;
              let tempRoderComMsg = {
                comid: item.comId,
                orderid: data.data,
                ordernum: item.buyNum
              }
              if (item.serviceId) tempRoderComMsg.keepsetserid = item.serviceId;
              requestAddOrderComMsgData(tempRoderComMsg).then(data => {
                ++countTwo;
                if (countOne == countTwo) return Promise.resolve(true)//这是请求添加订单商品信息
              })
            })
          }).then(data => {
            this.refreshOrderDatas().then(data => {
              this.$router.push({path: "/payment",query: {orderId: orderId}});
              //开始计时
              setTimeout(() => {
                //三十分钟之后发送请求查询订单状态是否修改为2已完成，如果还是1代付款，那么就将其状态修改为3已取消，并且刷新order数据，刷新order数据其实清空session就可以了
                updateOrderStatus(orderId)
                  .then(data => {
                    if (data){
                      this.$message.warning("您有一个订单已经超时，已自动帮您取消订单！")
                      sessionStorage.removeItem("Order")
                      console.log(orderId);
                    }
                  })
              },60*30*1000)//30分钟之后
            })
          })

        //在提交订单之后，需要删除对应选中的购物车信息,重session中取出数据
        if (sessionStorage.getItem("shoppingCarTempSubmitMsg")){
          //将商品编号和用户id发送到后台，以此来删除购物车信息
          let comIds = JSON.parse(sessionStorage.getItem("shoppingCarTempSubmitMsg"));
          let userId = this.getUserId;
          //发送请求到后台
          requestDeleteShoppingCarMg(comIds,userId);
          //为了确保在下次查看购物车信息时，能够看到真实有效的后台请求数据，这里先清空购物车的session数据，让其下次打开的时候前往后台请求
          sessionStorage.removeItem("ShopCarData");
        }
      },
      refreshOrderDatas(){//刷新订单信息的方法
        //向后台请求数据，请求的是订单信息，每个订单对应有多个订单商品信息，所以在订单信息请求过来之后要再次请求订单信息
        return requestOrderDataByUserId(this.getUserId)
          .then(data => {
            //调用方法将数据替换到store中
            this.loadDataForOrder(data.data);
            if (data.data) return Promise.resolve(data.data);
          }).then(data => {
          let orderId = "";
          data.filter(item => {//取出订单信息中所有订单编号
            orderId += item.orderId+","
          })
          //请求订单商品信息
          return requestOrderComMsgDataByUserId(orderId.substring(0,orderId.length-1))
        }).then(data => {
          //调用方法将数据替换到store中
          this.loadDataForOrderComMsg(data.data);
          return Promise.resolve(true);
        }).then(data => {
          //调用刷新session数据的方法
          this.refreshOrderSessionStorageData;
          //调用刷新session数据的方法
          this.refreshOrderComMsgSessionStorageData;
          return Promise.resolve(true);
        }).catch(data =>{
          console.log(data);
        })
      },
      getAndUpdateData(){//获取和更新数据的方法
        this.content = this.getData;
      },
      updateDataEmit(){//子组件的更新数据事件
        this.refreshDatas();
      },
      updateComShowMsg(){
        this.comShowMsg = this.getSubmitData;
      },
      refreshDatas(){
        //向后台请求数据
        requestShippingAdsMsgByUserId(this.getUserId)
          .then(data => {
            //调用方法将数据替换到store中
            this.loadDataForShippingAddress(data.data);
            return Promise.resolve(true);
          }).then(data => {
          //调用刷新session数据的方法
          this.refreshShippingAddressSessionStorageData;
          //更新地址模块的component信息
          this.getAndUpdateData();
        }).catch(data =>{
          console.log(data);
        })
      }
    },
    computed: {
      ...mapGetters({
        "getData": "ShippingAddress/getData",
        "getSubmitData": "OrderSubmitData/getData",
        "getBuyNum": "OrderSubmitData/getBuyNum",
        "getSubmitTotalPrice": "OrderSubmitData/getSubmitTotalPrice",
        refreshShippingAddressSessionStorageData: "ShippingAddress/refreshShippingAddressSessionStorageData",
        getUserId: "UserMsg/getUserId",
        getIsLLAdressMsgId: "ShippingAddress/getIsLLAdressMsgId",
        refreshOrderSessionStorageData: "Order/refreshOrderSessionStorageData",
        refreshOrderComMsgSessionStorageData: "OrderComMsg/refreshOrderComMsgSessionStorageData"
      }),
    },
    created() {
      //判断session当中是否存在数据，如果存在数据则将数据赋值给store
      if (sessionStorage.getItem("OrderSubmitData")){
        this.loadDataForOrderSubmitData(JSON.parse(sessionStorage.getItem("OrderSubmitData")));
      }
      //创建组件的时候更新数据
      this.refreshDatas();
      //更新商品展示信息
      this.updateComShowMsg();
    },
    data(){
      return {
        content: [],
        comShowMsg: []
      }
    },
  }
</script>

<style scoped>
  .shoppingCarDivNine {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 30px;
  }
  .shoppingCarDivTen {
    font-size: 14px;
    font-weight: 100;
  }
  .shoppingCarDivEleven {
    margin-top: 20px;
  }
</style>
